<template>
    <div>
        <a-modal
            title="选择培训试卷"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            :footer="null"
            :width="800"
        >
            <div>
                <div>当前已选中试卷：</div>
                <div style="margin-left: 10px;">
                    <div>
                        <span style="font-weight: 600;">试卷名称：</span>
                        <span>{{ currentTest.fsjmc }}</span>
                    </div>
                        <span style="font-weight: 600;">试卷类型：</span>
                        <span>{{ currentTest.fsjlx }}</span>
                </div>
            </div>
            <commpVxeTable
                :key="refreshTable"
                ref="headmanVxeTable"
                :config="config" 
                :columns="columnsVxe" 
                :formItem="formItem"
                :conditionBtnRow="true"
                @radioChange="radioChange"
            > 
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item >
                            <a-button class="green-btn" type="primary" icon="eye" @click="detailedClick(row)">查看</a-button>
                        </a-form-item>
                    </a-form> 
                </template>
            </commpVxeTable>
            <testPaperDetailed ref="refDetailedRef" :detailFsjid="detailFsjid"/>
        </a-modal>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import { jcylxjhquerySelectLxSj,jcylxjhsaveSelectPxsj } from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import testPaperDetailed from '../../assessCheck/testPaper/testPaperDetailed.vue'
export default {
    components:{
        commpVxeTable,
        testPaperDetailed,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            refreshTable:null,
            config:{
                api: assessCheckApi.jcylxjhqueryPxSjjbxxList,
                rowId: 'id',
                paramet:{
                }
            },
            columnsVxe:[{ 
                type: 'radio', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '试卷名称', //列头显示文字
                field: 'fsjmc',
            },{
                title: '试卷类型', //列头显示文字
                field: 'fsjlx',
            },{
                title: '操作',
                field: 'id',
                titleInterval:true,
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                    header:'operation_header',
                },
                width:100,
            }],
            formItem:[{
                label: '试卷名称',
                model: 'fsjmc',
            },{
                label: '试卷类型',
                model: 'fsjlx',
            }],
            detailFsjid:'',
            currentTest:{},
            row:{},
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            //console.log(row)
           this.row = row
        },
        radioChange(val){
            //console.log(val.row)
            //console.log(this.row)
            jcylxjhsaveSelectPxsj({flxjhid:this.row.id,sjid:val.row.id}).then(res=>{
                if(res.code == 200){
                    this.currentTest = val.row
                    this.$message.success(res.message)
                    this.$emit('getSelectLxSj',this.row.id)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        detailedClick(row){
            this.detailFsjid = row.id
            this.$refs.refDetailedRef.visibleDetailedShow = true
            this.$refs.refDetailedRef.getData(row)
        },
        handleOk(){

        },
    }
}
</script>